<template>
<div class="allbuju"> 
    <div id="top">
            <div class="back" @click="baojieshouye">
               <i class="fa-solid fa-arrow-left-long"></i>
            </div>
            <p>专属保姆</p>
    </div>
    

    <div class="main-content">
        <ul class="left">
            <li>非住家保姆</li>
            <li>
                <p>保洁+做饭</p>
                <span>单休/双休</span>
            </li>
            <li>
                <p>保洁+带小孩</p>
                <span>单休/双休</span>
            </li>
            <li>
                <p>保洁+照顾老人</p>
                <span>单休/双休</span>
            </li>
        </ul>
        <img src="@/assets/baomu1.png">
       <ul class="right">
            <li style="margin:10px 0 15px">住家保姆(单休) </li>
            <li>保洁+做饭</li>
            <li style="margin:30px 0 35px">
                <p>保洁+带小孩</p> 
                <span>0~3岁/3~ 11岁</span>
            </li>
            <li>
                <p>保洁+照顾老人</p>
                <span>自理/半自理/不能自理</span>
            </li>
        </ul>
        
        
       <table class="main-content">
       
        <tbody>
            <tr>
            <td>保姆类别</td><td>工资标准</td>
            <td rowspan="16" onclick="toZixun( )">
            "服务费:”
            <br>
            "10%/每月"<br>
            "100%/每年”</td>
            </tr><tr>
            <td rowspan="1" >家务烹饪</td>
            <td>4800-7508元/月</td></tr>
            <tr>
            <td rowspan="1">照顾小孩</td>
            <td>45ee-7088元/月</td></tr>
            <tr> 
            <td rowspan="1">护工护理</td>
            <td>4208-6888元/月</td></tr>
        </tbody>
    </table>
    <div id="yuyue">立即预约</div>
</div>


</div>
</template>

<script>
export default {
  name: 'nammy',
  data(){
      return{

      }
  },
   methods:{
      baojieshouye(){
          this.$router.replace('/baomubaojie')
      }
   }
}
</script>

<style scoped>
#top{
    display: flex;
    background-color: coral;
}
#top i{
    margin: 10px 0 0 10px;
    font-size: 2rem;
    color: rgb(255, 255, 255);
}
#top p{
    position: relative;
    font-weight: lighter;
    color: aliceblue;
  left:120px;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.main-content {
    border-collapse: separate;
    text-align: center;
    vertical-align: middle;
    width: 100%;
      margin-top: 20px;
}
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
  
}
.main-content tr td {
    background-color: #F0F0F0;
    padding: 9px 0;
}
ul {
    position: relative;
    display: inline-block;
    list-style-type: none;
   
}
.left{
    right: 60px;
}
.right{
    left:20px;
}
ul li:first-child {
    color: #E95513;
    font-size: 20px;
}
ul li span {
    color: #999;
}
img{
    position: absolute;
    width: 100px;
    height: 200px;
    left: 130px;
    top: 150px;

}
#yuyue{
    height: 50px;
    background-color: coral;
    position: relative;
    /* font-weight: lighter;
    color: aliceblue; */
  top:252px;
  color: aliceblue;
  text-align: center;
  font-size: 25px;
}
</style>